<script setup>
import { ref, reactive, watch, toRaw } from "vue";
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialUpload from "@/components/MaterialUpload.vue";
import { assetapplicationSave, sendSimpleMail } from "@/api/tires";
import { customEmail } from "@/utils/index.js";
import { message, Input, Form, FormItem } from "ant-design-vue";
const termList = [
    {
        id: 1,
        value: "Your vehicle must prominently display the Mastertrack Tires logo in approved locations at all events. Competitors' names or logos must not appear on the sponsored vehicle.",
    },
    {
        id: 2,
        value: "Your vehicle and conduct at events and online will be a direct representation of Mastertrack Tires. We aim to make a great impression everywhere we go, and we expect you to do the same.",
    },
    {
        id: 3,
        value: "Any actions or behaviors at events or on social media that negatively affect the Mastertrack Tires brand will result in immediate termination of your sponsorship status.",
    },
    {
        id: 4,
        value: "Promote and tag @mastertrack_tires and use #mastertracktires in all social media posts of your sponsored vehicle at least once per week, and once per day during event attendance.",
    },
    {
        id: 5,
        value: "A high-quality walk-around video of your vehicle, showcasing the build and Mastertrack Tires, must be provided. Mention the tires specifically and explain why you chose Mastertrack.",
    },
    {
        id: 6,
        value: "Submit high-resolution photos, magazine features, show coverage spots, copies of ads, brochures, and a summary of accomplishments at each event attended. Photographs must be 240 dpi and submitted within 30 days of the event to marketing@unicorntire.com.",
    },
    {
        id: 7,
        value: "One Mastertrack Tires logo (vinyl decals) must be clearly visible on the vehicle's exterior.",
    },
    {
        id: 8,
        value: "An approved sponsorship is valid for 12 months from the date you receive your tires. Sponsored products must remain on the vehicle for no less than one year from the date of the agreement.",
    },
    {
        id: 9,
        value: "Sponsorship offers will be either FULL (no charge for tires, but shipping charges apply) or PARTIAL (50% off, with shipping charges still applicable).",
    },
    {
        id: 10,
        value: "A professional rendering of the project vehicle must be submitted with the sponsorship form for approval. If the vehicle is already completed, provide high-quality photos showing its modifications and uniqueness.",
    },
    {
        id: 11,
        value: "A professional video or high-quality photos showcasing the build are also required. While we don't expect Hollywood production, authenticity and quality are important.",
    },
   /* {
        id: 12,
        value: "An approved sponsorship is valid for 12 months from the date you receive your tires. Sponsored products must remain on the vehicle for no less than one year from the date of the agreement.",
    }, */
    {
        id: 13,
        value: "You may be invited to attend specific shows or events to represent Mastertrack Tires. Several weeks’ notice will be given for scheduling.",
    },
    {
        id: 14,
        value: "Credit card information will be required to be kept on file. If you fail to meet the terms of this agreement, your credit card will be charged the full retail price of the tires.",
    },
    {
        id: 15,
        value: "Failure to adhere to the terms will also result in payment of the cost of chosen sponsored products.",
    },
];
let agree = ref(false);
let isClear = ref(false);
let form = reactive({
    buildFirstName: "",
    buildLastName: "",
    additionalComments: "",
    color: "",
    country: "",
    currentModifications: "",
    emailAddress: "",
    firstName: "",
    futureModifications: "",
    homeAptNumber: "",
    homeCity: "",
    homePostal: "",
    homeState: "",
    homeStreet: "",
    images: "",
    lastName: "",
    make: "",
    model: "",
    otherCurrentSponsors: "",
    ownerName: "",
    phoneNumber: "",
    planNextYear: "",
    shippingAptNumber: "",
    shippingCity: "",
    shippingPostal: "",
    shippingState: "",
    shippingStreet: "",
    socialMediaInformation: "",
    tireSize: "",
    tireTreadPattern: "",
    tireYear: "",
    vehicleSpaceNumber: "",
});
const propList = [
    [
        {
            model: "firstName",
            text: "FIRST NAME",
            span: 6,
        },
        {
            model: "lastName",
            text: "LAST NAME",
            span: 6,
        },
        {
            model: "phoneNumber",
            text: "PHONE NUMBER",
            span: 6,
        },
        {
            model: "emailAddress",
            text: "EMAIL ADDRESS",
            span: 6,
        },
        {
            text: "BUILD MANAGER (IF APPLICABLE)",
            isNotRequired: true,
        },
        {
            model: "buildFirstName",
            isNotRequired: true,

            span: 12 ,
        },
        /* {
            model: "buildLastName",
            isNotRequired: true,

            span: 6,
        }, */
        {
            text: "HOME ADDRESS (STREET, CITY, STATE, AND POSTAL, APT NUMBER)",
        },
        {
            model: "homeStreet",
            placeholder: "street",
            span: 4,
        },
        {
            model: "homeCity",
            placeholder: "city",
            span: 4,
        },
        {
            model: "homeState",
            placeholder: "state",
            span: 4,
        },
        {
            model: "homePostal",
            placeholder: "postal",
            span: 4,
        },
        {
            model: "homeAptNumber",
            placeholder: "apt number",
			isNotRequired: true,
            span: 4,
        },

        {
            text: "SHIPPING ADDRESS (STREET, CITY, STATE, AND POSTAL, APT NUMBER)",
        },
        {
            model: "shippingStreet",
            placeholder: "street",
            span: 4,
        },

        {
            model: "shippingCity",
            placeholder: "city",
            span: 4,
        },
        {
            model: "shippingState",
            placeholder: "state",
            span: 4,
        },
        {
            model: "shippingPostal",
            placeholder: "postal",
            span: 4,
        },
        {
            model: "shippingAptNumber",
            placeholder: "apt number",
			isNotRequired: true,
            span: 4,
        },
        {
            model: "country",
            text: "COUNTRY",
        },
    ],
    [
        {
            model: "tireSize",
            text: "DESIRED TIRE SIZE?",
            span: 6,
        },
        {
            model: "tireTreadPattern",
            text: "DESIRED TIRE TREAD PATTERN?",
            span: 6,
        },
        {
            model: "tireYear",
            text: "YEAR",
            span: 6,
        },
        {
            model: "make",
            text: "MAKE",
            span: 6,
        },
        {
            model: "model",
            text: "MODEL",
            span: 6,
        },

        {
            model: "color",
            text: "COLOR",
            span: 6,
        },

        {
            model: "ownerName",
            text: "REGISTERED OWNER NAME",
            span: 6,
        },
        {
            model: "currentModifications",
            text: "CURRENT MODIFICATIONS",
			isNotRequired: true,
            span: 6,
        },
        {
            model: "futureModifications",
            text: "FUTURE MODIFICATIONS",
			isNotRequired: true,
            span: 6,
        },
        {
            model: "otherCurrentSponsors",
            text: "OTHER CURRENT SPONSORS",
			placeholder: "Input N/A if not applicable",
            span: 6,
        },
        {
            text: "WILL THIS VEHICLE BE FEATURED AT SEMA? IF YES, PLEASE PROVIDE A BOOTH OR VEHICLE SPACE NUMBER",
        },
        {
            model: "vehicleSpaceNumber",
			placeholder: "Input N/A if not applicable",
        },
    ],
    [
        {
            model: "images",
            text: "PLEASE UPLOAD IMAGES OF YOUR CURRENT BUILD",
            type: "img",
        },
        {
            model: "planNextYear",
            text: "SHOWS/EVENTS YOU ARE PLANNING TO ATTEND IN THE NEXT YEAR",
			placeholder: "Input N/A if not applicable",
            //type: "textarea",
            //   isNotRequired: true,
        },
        {
            model: "additionalComments",
            text: "ADDITIONAL COMMENTS",
            type: "textarea",
            isNotRequired: true,
        },
    ],
];
const formRef = ref(null);
const formRef2 = ref(null);
const formRef3 = ref(null);

const submit = async () => {
    if (!agree.value) {
        message.warning(`Please check the box to agree to the above agreement.`);
        return;
    }
    let flag = false;
    let flag2 = false;
    let flag3 = false;

    await formRef.value
        .validate()
        .then(() => {
            flag = true;
        })
        .catch(() => {
            //   message.error(`Submit failed.Please contact the administrator.`);
            return;
        });
    await formRef2.value
        .validate()
        .then(() => {
            flag2 = true;
        })
        .catch(() => {
            //   message.error(`Submit failed.Please contact the administrator.`);
            return;
        });
    await formRef3.value
        .validate()
        .then(() => {
            flag3 = true;
        })
        .catch(() => {
            //   message.error(`Submit failed.Please contact the administrator.`);
            return;
        });
    if (!(flag && flag2 && flag3)) {
        return;
    }
    if (agree.value) {
        let params = toRaw(form);
        params.socialMediaInformation = (params.instagram || 0) + "," + (params.facebook || 0) + "," + (params.twitter || 0) + "," + (params.tiktok || 0) + "," + (params.youtube || 0);
        assetapplicationSave(params)
            .then((res) => {
                if (res.code == 200) {
                    isClear.value = true;
                    setTimeout(() => {
                        isClear.value = false;
                    }, 2000);
                    message.success(`Submit successfully`);
                    const mailParams = {
                        content: customEmail(propList.flat(), params),
                        subject: "MASTERTRACK-SPONSOR APPLICATION",
                        toMail: "customerservice@unicorntire.com",
                    };
                    sendSimpleMail(mailParams).then((res) => {});
                } else {
                    message.error(`Submit failed.Please contact the administrator.`);
                }
            })
            .catch(() => {
                message.error(`Submit failed.Please contact the administrator.`);
            });
    } else {
    }
};
const handleChange = (url, prop) => {
    form[prop] = url;
};
</script>
<template>
    <div>
        <div class="desc">
            <h4 class="text-f-Montserrat-Regular text-red">VEHICLE SPONSORSHIP APPLICATION</h4>
            <p class="text-f-Montserrat-Regular text-black">Thank you for considering becoming a part of the Mastertrack Tires family as a sponsored ambassador. To help us process your request efficiently, please complete the form with as much detail as possible. We carefully evaluate all requests to ensure compatibility with our brand and alignment with our current company initiatives. Products will be supplied only after the form is fully completed, reviewed, and approved. We appreciate your understanding and cooperation. While we would love to support everyone interested in Mastertrack Tires, we have a limited number of sponsorship opportunities. We will reach out to you if your submission meets our sponsorship criteria.</p>

            <p class="text-f-Montserrat-Regular text-black"><span class="text-red">*PLEASE NOTE: &nbsp</span> To ensure your sponsorship application for Mastertrack Tires is considered, please complete all requested information on the form. Applications with incomplete information will be automatically disqualified.</p>
        </div>
        <div>
            <h4 class="text-f-Montserrat-Regular text-red">PERSONAL INFORMATION</h4>
            <Form ref="formRef" :model="form">
                <div class="row">
                    <div v-for="(item, index) in propList[0]" :key="index" :class="`col-lg-${item.span || 12}`">
                        <FormItem
                            v-if="item.model"
                            :label="item.text"
                            :name="item.model"
                            :label-col="{ span: item.text ? 24 : 0 }"
                            :wrapper-col="{ span: 24 }"
                            :rules="[
                                {
                                    required: !item.isNotRequired,
                                    message: `${item.text || ''} IS REQUIRED!`,
                                },
                            ]"
                        >
                            <MaterialUpload v-if="item.type == 'img'" @handleFilesChange="(url) => handleChange(url, item.model)" />
                            <MaterialTextArea v-else-if="item.type == 'textarea'" v-model="form[item.model]" class="input-group-outline mb-4" :rows="6"></MaterialTextArea>
                            <Input v-else v-model:value="form[item.model]" :placeholder="item.placeholder"></Input>
                        </FormItem>
                        <div class="text-f-Montserrat-Bold mb-2" v-else><span v-if="!item.isNotRequired" class="xing">*</span>{{ item.text }}</div>
                    </div>
                </div>
            </Form>

            <div class="row">
                <h4 class="text-f-Montserrat-Regular text-red my-4">SOCIAL MEDIA INFORMATION</h4>

                <div class="col-lg-4">
                    <div style="display: flex; align-items: center">
                        <MaterialCheckbox id="terms" color="danger" style="margin-top: 22px" :checked="!!form.instagram"> </MaterialCheckbox>
                        <span class="text-red text-f-Montserrat-Bold mx-2"> INSTAGRAM </span
                        ><MaterialInput
                            id="instagram"
                            v-model="form.instagram"
                            class="input-group-outline"
                            :label="{
                                class: 'form-label',
                            }"
                            type="text"
                        />
                    </div>
                </div>
                <div class="col-lg-4">
                    <div style="display: flex; align-items: center">
                        <MaterialCheckbox id="terms" color="danger" style="margin-top: 22px" :checked="!!form.facebook"> </MaterialCheckbox>
                        <span class="text-red text-f-Montserrat-Bold mx-2"> FACEBOOK </span
                        ><MaterialInput
                            id="facebook"
                            v-model="form.facebook"
                            class="input-group-outline"
                            :label="{
                                class: 'form-label',
                            }"
                            type="text"
                        />
                    </div>
                </div>
                <div class="col-lg-4">
                    <div style="display: flex; align-items: center">
                        <MaterialCheckbox id="terms" color="danger" style="margin-top: 22px" :checked="!!form.twitter"> </MaterialCheckbox>
                        <span class="text-red text-f-Montserrat-Bold mx-2"> TWITTER </span
                        ><MaterialInput
                            id="twitter"
                            v-model="form.twitter"
                            class="input-group-outline"
                            :label="{
                                class: 'form-label',
                            }"
                            type="text"
                        />
                    </div>
                </div>
                <div class="col-lg-4">
                    <div style="display: flex; align-items: center">
                        <MaterialCheckbox id="terms" color="danger" style="margin-top: 22px" :checked="!!form.tiktok"> </MaterialCheckbox>
                        <span class="text-red text-f-Montserrat-Bold mx-2"> TIKTOK </span
                        ><MaterialInput
                            id="tiktok"
                            v-model="form.tiktok"
                            class="input-group-outline"
                            :label="{
                                class: 'form-label',
                            }"
                            type="text"
                        />
                    </div>
                </div>
                <div class="col-lg-4">
                    <div style="display: flex; align-items: center">
                        <MaterialCheckbox id="terms" color="danger" style="margin-top: 22px" :checked="!!form.youtube"> </MaterialCheckbox>
                        <span class="text-red text-f-Montserrat-Bold mx-2"> YOUTUBE </span
                        ><MaterialInput
                            id="youtube"
                            v-model="form.youtube"
                            class="input-group-outline"
                            :label="{
                                class: 'form-label',
                            }"
                            type="text"
                        />
                    </div>
                </div>
                <div class="col-lg-4"></div>
            </div>
            <h4 class="text-f-Montserrat-Regular text-red my-4">VEHICLE INFORMATION</h4>
            <Form ref="formRef2" :model="form">
                <div class="row">
                    <div v-for="(item, index) in propList[1]" :key="index" :class="`col-lg-${item.span || 12}`">
                        <FormItem v-if="item.model" :label="item.text" :name="item.model" :label-col="{ span: item.text ? 24 : 0 }" :wrapper-col="{ span: 24 }" :rules="[{ required: !item.isNotRequired, message: `${item.text || ''} IS REQUIRED!` }]">
                            <MaterialUpload v-if="item.type == 'img'" @handleFilesChange="(url) => handleChange(url, item.model)" />
                            <MaterialTextArea v-else-if="item.type == 'textarea'" v-model="form[item.model]" class="input-group-outline mb-4" :rows="6"></MaterialTextArea>
                            <Input v-else v-model:value="form[item.model]" :placeholder="item.placeholder"></Input>
                        </FormItem>
                        <div class="text-f-Montserrat-Bold mb-2" v-else><span class="xing">*</span>{{ item.text }}</div>
                    </div>
                </div>
            </Form>

            <Form ref="formRef3" :model="form">
                <div class="row">
                    <div v-for="(item, index) in propList[2]" :key="index" :class="`col-lg-${item.span || 12}`">
                        <FormItem
                            v-if="item.model"
                            :label="item.text"
                            :name="item.model"
                            :label-col="{ span: item.text ? 24 : 0 }"
                            :wrapper-col="{ span: 24 }"
                            :rules="[
                                {
                                    required: !item.isNotRequired,
                                    message: `${item.text || ''} IS REQUIRED!`,
                                },
                            ]"
                        >
                            <MaterialUpload v-if="item.type == 'img'" @handleFilesChange="(url) => handleChange(url, item.model)" />
                            <MaterialTextArea v-else-if="item.type == 'textarea'" v-model="form[item.model]" class="input-group-outline mb-4" :rows="6"></MaterialTextArea>

                            <Input v-else v-model:value="form[item.model]" :placeholder="item.placeholder"></Input>
                        </FormItem>
                        <div class="text-f-Montserrat-Bold mb-2" v-else><span v-if="!item.isNotRequired" class="xing">*</span>{{ item.text }}</div>
                    </div>
                </div>
            </Form>
            <h4 class="text-f-Montserrat-Regular text-red my-4 text-left">BY SUBMITTING THIS REQUEST FOR SPONSORSHIP FORM YOU AGREE TO THE FOLLOWING TERMS</h4>

            <div class="term">
                <div class="text-item" v-for="(item, index) in termList" :key="index">
                    <div class="dot"></div>
                    <div>
                        <span class="content text-f-Montserrat-Medium">{{ item.value }} </span>
                    </div>
                </div>
                <div style="display: flex">
                    <MaterialCheckbox id="yes" color="danger" style="margin-right: 0.5rem" v-model="agree"> </MaterialCheckbox>
                    <span class="text-red text-f-Montserrat-Medium"> BY CHECKING THE BOX BELOW, I ACKNOWLEDGE AND ACCEPT THE SPONSORSHIP AGREEMENT TERMS ABOVE. I ALSO GRANT MASTERTRACK TIRES PERMISSION TO USE, DISPLAY, OR PUBLISH YOUR VEHICLE PHOTOGRAPHY AND VIDEO FOOTAGE IN COMMERCIAL, EDITORIAL, AND SOCIAL MEDIA CAMPAIGNS.</span>
                </div>
            </div>
            <MaterialButton class="my-4 bg-red" fullWidth @click="submit"><span class="fs-4 text-f-ERASBD">SUBMIT</span> </MaterialButton>
        </div>
    </div>
</template>

<style scoped>
.desc {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    margin: 1rem 0;
}
.form-select {
    padding: 0.625rem 0.75rem !important;
}
.form-select:focus {
    background: none;
    border: 1px solid #d2d6da;
    border-radius: 0.375rem;
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    padding: 0.625rem 0.75rem !important;
    line-height: 1.3 !important;
}
.dot {
    width: 0.6rem;
    height: 0.6rem;
    background: #ed1c24;
    border-radius: 0.6rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.4rem;
}
.term {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
}
.text-item {
    display: flex;
    margin: 0.5rem 0;
    text-align: left;
    font-size: 16px;
    color: #181818;
}
.xing {
    width: 12px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 20px;
    color: #ff4d4f;
    font-size: 14px;
    font-family: SimSun, sans-serif;
}

::v-deep(.ant-input) {
    padding: 9px 11px;
}
::v-deep(.ant-form-item) {
    margin-bottom: 16px;
}
::v-deep(.ant-form-item-label) {
    font-family: Montserrat-Bold;
}
</style>
